<template>
    <div class="stepsSuccess flex-row ite-c jus-c">
        <template v-if="active_user">
            <i class="el-icon-success"></i>
            <span>账号激活成功，</span>
            <el-link type="primary" style="font-size: 18px" @click.native="goLogin">点击跳转登录 ({{ countTime }}s)</el-link>
        </template>

        <template v-else>
            账号不存在
        </template>
    </div>
</template>

<script>
    import { activeUser } from '@/api/user'
    export default {
        name: "stepsSuccess",
        data() {
            return {
                countTime:15,
                active_user:'',
            }
        },
        mounted() {
            this.activeUser()
        },
        methods: {
            // 激活账号
            activeUser(){
                this.active_user = this.$route.query.active_user
                if(!this.active_user)return false

                activeUser(this.active_user)
                    .then(res=>{
                        this.countDown()
                    })
            },
            // 倒计时
            countDown(){
                this.timer = setTimeout(()=>{
                    this.countTime--;
                    if(this.countTime>0){
                        this.countDown()
                    }else{
                        this.goLogin()
                    }
                },1000)
            },
            goLogin(){
                this.$router.push('/login')
            }
        },
    }
</script>

<style scoped lang="less">
    .stepsSuccess{
        height: 100px;
        font-weight: 600;
        font-size: 18px;
        color:#67c23a;

        i{
            font-size: 28px;
        }

        span{
            margin-left: 10px;
        }
    }
</style>
